<template>
  <!-- 人员操作 -->
  <h-modal class="event-modal" v-model="show" :title="type == 'add' ? '添加':'编辑'" @submit="submit">
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      size="large"
      :labelCol="{span: 4}"
      :wrapperCol="{span: 16}">
      <a-row :gutter="0">
        <a-col :span="12">
          <a-form-model-item label="姓名" >
            <div
              readOnly
              style="width: 100%"
              size="large"
              :maxLength="50"
              placeholder="请输入姓名">{{ form.name }}</div>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="单位" >
            <div
              readOnly
              style="width: 100%"
              size="large"
              :maxLength="50"
              placeholder="请输入单位">{{ form.company }}</div>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="职务" >
            <div
              readOnly
              style="width: 100%"
              size="large"
              :maxLength="50"
              placeholder="请输入职务">{{ form.post }}</div>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="职称" >
            <div
              readOnly
              style="width: 100%"
              size="large"
              :maxLength="50"
              placeholder="请输入职称">{{ form.title }}</div>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            label="备注"
            :labelCol="{span: 2}"
            :wrapperCol="{span: 16}">
            <div
              readOnly
              style="width: 100%"
              size="large"
              :maxLength="300"

              placeholder="请输入备注">{{ form.remark }}</div>
          </a-form-model-item>
        </a-col>
      </a-row>

    </a-form-model>
  </h-modal>
</template>

<script>
import moment from 'moment';
// eslint-disable-next-line
import { addEnforcement, editEnforcement } from '@/api/db';
import cloneDeep from 'lodash/cloneDeep';

export default {
  props: {
    showModal: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'showModal',
    event: 'update:showModal'
  },
  watch: {
    showModal: {
      handler(val) {
        this.show = val;
        if (val) {
          // detailAccount().then(res => {
          //   this.form = res.data || {};
          //   this.$set(this.form, 'isLayered', !!this.form.isLayered);
          // });
        }
      },
      immediate: true
    },
    show(val) {
      this.$emit('update:showModal', val);
    }
  },
  data() {
    return {
      moment,
      show: false,
      form: {},
      type: 'add',
      rules: {
        name: [{ required: true, message: '请输入' }],
        title: [{ required: true, message: '请输入' }],
        company: [{ required: true, message: '请输入' }],
        post: [{ required: true, message: '请输入' }]
      }
    };
  },
  methods: {
    add() {
      // const that = this;
      this.type = 'add';
      this.$nextTick(() => {
        this.form = {};
        this.$refs.ruleForm && this.$refs.ruleForm.resetFields();
      });
    },
    edit(form) {
      this.type = 'edit';
      this.form = { ...this.form, ...form };
    },
    submit() {
      this.$emit('submit', cloneDeep(this.form));
      this.show = false;
      // this.$refs.ruleForm.validate(valid => {
      //   if (valid) {
      //     if (this.type == 'add') {
      //       addEnforcement(this.form).then(res => {
      //         this.$message.success('创建成功');
      //         this.show = false;
      //         this.$emit('submit', cloneDeep(this.form));
      //         this.form = cloneDeep({});
      //       });
      //     } else if (this.type == 'edit') {
      //       editEnforcement(this.form).then(res => {
      //         this.$message.success('编辑成功');
      //         this.show = false;
      //         this.$emit('submit', cloneDeep(this.form));
      //         this.form = cloneDeep({});
      //       });
      //     }
      //   } else {
      //     console.log('error submit!!');
      //     return false;
      //   }
      // });
    }
  }
};
</script>

<style>

</style>
